import React, { useEffect, useState, memo } from 'react'

compare = (prevProps, nextProps) => {
	if (
		prevProps.person.name !== nextProps.person.name ||
		prevProps.person.age !== prevProps.person.age
	) {
		// 返回false 表示需要重新渲染，和shouldComponentUpdata相反
		return false
	} else {
		// 返回 true 表示不需要重新渲染
		return true
	}
}

// 因为memo内部只是浅层比较，此时只改变job也会让子组件重新渲染
// 传递第二个参数作为自定义比较逻辑，
const ShowPerson = memo(({ person }) => {
	console.log('render')
	return (
		<div>
			{person.name} {person.age}
		</div>
	)
}, compare)

const App = () => {
	const [person, setPerson] = useState({
		name: '张三',
		age: 20,
		job: 'waiter',
	})

	useEffect(() => {
		setInterval(() => {
			setPerson({
				...person,
				job: 'chef',
			})
		}, 1000)
	}, [])

	return (
		<div>
			<ShowPerson person={person} />
		</div>
	)
}

export default App
